/**
 * Copyright (c) Enalean, 2016. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

$nav-blocks-margin: 30px;
$color-switcher-item-active-color: #ffffff;
$nav-item-color: #888888;

.main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    > .tlp-tab:first-child {
        padding: 4px 30px 2px 0;

        > #doc-title {
            font-size: 36px;
            font-weight: 600;
            letter-spacing: -6px;
        }

        > .fa-dot-circle-o {
            margin: 0 0 0 16px;
        }
    }
}

.doc-main {
    margin-top: 90px;
}

.color-switcher {
    text-align: center;

    > a {
        @keyframes bounceIn {
            0%   { transform: scale(1);   }
            40%  { transform: scale(1.6); }
            70%  { transform: scale(1.3); }
            100% { transform: scale(1.5); }
        }
        @keyframes bounceOut {
            0%   { transform: scale(1.5); }
            50%  { transform: scale(.8);  }
            100% { transform: scale(1);   }
        }

        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin: 10px auto;
        border-radius: 50%;
        cursor: pointer;

        &:not(.active) {
            animation: bounceOut 250ms ease-in-out;
        }

        &:hover:not(.active) {
            animation: bounceIn 250ms ease-in-out forwards;
        }

        &.active {
            transform: scale(1.6);

            &::before {
                position: absolute;
                top: 3px;
                left: 3px;
                color: $color-switcher-item-active-color;
                font-family: FontAwesome;
                font-size: 9px;
                content: '\f00c';
            }
        }

        &.switch-to-orange { background-color: $tlp-theme-orange; }
        &.switch-to-blue   { background-color: $tlp-theme-blue;   }
        &.switch-to-green  { background-color: $tlp-theme-green;  }
        &.switch-to-grey   { background-color: $tlp-theme-grey;   }
        &.switch-to-purple { background-color: $tlp-theme-purple; }
        &.switch-to-red    { background-color: $tlp-theme-red;    }
    }
}

#back-to-top {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    transition: opacity .25s ease-in-out;
    border-radius: 50%;
    background: rgba(0, 0, 0, .1);
    color: #ffffff;
    font-size: 50px;
    text-decoration: none;
    opacity: .2;
    z-index: 100;

    &:hover {
        opacity: 1;
    }
}
